<template>
    <view class="uni-product-list">
        <view class="uni-product" v-for="(product,index) in productList" :key="index">
			<view style="background-color: white;padding: 5px 5px 5px 10px; border-radius: 10px;">
				<view class="image-view" @click="goDetail(product.id)">
					<image v-if="renderImage" class="uni-product-image" :src="product.originalImg | formatUrl"></image>
				</view>
				<view class="uni-product-title">{{product.goodsName.length > 9 ? product.goodsName.slice(0, 9) + '...' : product.goodsName }}</view>
				<view class="uni-product-brief">{{product.goodsBrief.length > 10 ? product.goodsBrief.slice(0, 10) + '...' : product.goodsBrief}}</view>
				<view class="uni-product-price">
	<!--                <text class="uni-product-price-favour">￥{{product.marketPrice}}</text> -->
					<text class="uni-product-price-original">￥{{product.shopPrice}}</text>
				   <text class="uni-product-tip">精选</text>
				</view>	
			</view>
        </view>
		<view class="uni-noProduct" v-if="productList.length <= 0">
			<image class="uni-image" src="../../static/icon/blank.png" mode=""></image>
			<view>很抱歉，店小二未能找到相关的产品</view>
		</view>
    </view>
</template>

<script>
    export default {
		name: 'uni-product-list',
        data() {
            return {
                title: 'product-list',
            };
        },
		props: {
			productList: {
				type: Array,
				default: function () {
				return []
			  }
			},
			renderImage: {
				type: Boolean,
				default: true
			}
		},
		filters: {
			formatUrl: function(url) {
				return url && url.indexOf('http') !== -1 ? url : 'http://106.13.76.109:8080/xsmall/sys/common/view/'+ url
			}
		},
        methods: {
            loadData(action = 'add') {
                const data = [];

                if (action === 'refresh') {
                    this.productList = [];
                }

                data.forEach(item => {
                    this.productList.push(item);
                });
				console.log('this.productList:', this.productList)
            },
			goDetail(id) {
				uni.navigateTo({
					url: `../goods/goods?goodsId=${id}`
				})
			}
        },
        onPullDownRefresh() {
            this.loadData('refresh');
            // 实际开发中通常是网络请求，加载完数据后就停止。这里仅做演示，加延迟为了体现出效果。
            setTimeout(() => {
                uni.stopPullDownRefresh();
            }, 2000);
        },
        onReachBottom() {
            this.loadData();
        }
    };
</script>

<style scoped >
    /* product */
    page {
        background: #F8F8F8;
    }

    view {
        font-size: 28upx;
    }

    .uni-product-list {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        flex-direction: row;
		padding: 10upx;
		box-sizing: border-box;
    }
	.uni_noProduct {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		color: #aaa;
	}
	.uni-image {
		display: inline-block;
		width: 240upx;
		height: 240upx;
		margin: 14% auto;
	}
    .uni-product {
        padding: 10upx;
        display: flex;
		flex-direction: column;
	/* 	margin: 10upx; */
		width: 50%;
		box-sizing: border-box;
    }

    .image-view {
        height: 300upx;
        width: 300upx;
        margin: 12upx 0;
    }

    .uni-product-image {
        height: 300upx;
        width: 300upx;
    }

    .uni-product-title {
        width: 300upx;
        word-break: break-all;
        display: -webkit-box;
        overflow: hidden;
        line-height: 1.5;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
		font-size: 15px;
    }
	.uni-product-brief {
		font-size: 13px;
		color: #666;
	}
    .uni-product-price {
        margin-top: 10upx;
        font-size: 28upx;
        line-height: 1.5;
        position: relative;
    }

    .uni-product-price-original {
        color:#E80505;
		font-weight: 800;
		font-size: 14px;
    }

    .uni-product-price-favour {
        color: #888888;
        text-decoration: line-through;
        margin-left: 10upx;
    }

    .uni-product-tip {
        position: absolute;
        right: 10upx;
        background-color: #ff3333;
        color: #ffffff;
        padding: 0 10upx;
        border-radius: 5upx;
    }
	.uni-noProduct{ 
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
</style>
